<template>
  <echarts-view :options="option" height="68px" theme="walden"></echarts-view>
</template>

<script>
import echartsView from '@/components/ECharts'
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    echartsView
  },
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '1%',
          right: '0',
          top: '70%'
        },
        xAxis: {
          data: this.propsData.title,
          splitLine: false
        },
        yAxis: {
          show: false
        },
        series: [
          {
            data: this.propsData.data,
            type: 'bar',
            barCategoryGap: '55%'
          }
        ]
      }
    }
  },
  watch: {
    propsData: function (n) {
      this.option.series[0].data = n.data
    }
  }
}
</script>
